<template>
	<view>
		<cu-custom title="" rightIcon="chat" :isShowLeft="false"></cu-custom>
		<!-- navbar -->
		<mescroll-body ref="mescrollRef" @down="downCallback" :down="downOpt">
			<view class="flex flex-between bg-white padding-lr padding-tb-xl">
				<view class="flex align-center">
					<u-avatar size="110rpx" src="https://cdn.uviewui.com/uview/album/1.jpg"></u-avatar>
					<view class="margin-left">
						<view class="text-xl text-bold">晴天</view>
						<view class="margin-top-xs text-gray">好好学习，天天向上</view>
					</view>
				</view>
				<u-icon name="arrow-right" color="#999" size="38rpx"></u-icon>
			</view>

			<view class="margin-top bg-white">
				<view class="flex flex-between padding">
					<text class="text-lg text-bold">我的订单</text>
					<view class="flex align-center">
						<text class="text-gray margin-right-xs">查看全部</text>
						<u-icon name="arrow-right" color="#999" size="28rpx"></u-icon>
					</view>
				</view>
				<view class="flex text-center padding-tb-xl padding-lr">
					<view class="flex-sub">
						<view class="flex justify-center">
							<u--image :showLoading="true" src="/static/images/user/1.png" width="52rpx" height="52rpx">
							</u--image>
						</view>
						<view class="text-center margin-top-xs">
							在学
						</view>
					</view>
					<view class="flex-sub">
						<view class="flex justify-center">
							<u--image :showLoading="true" src="/static/images/user/2.png" width="52rpx" height="52rpx">
							</u--image>
						</view>
						<view class="text-center margin-top-xs">
							已结
						</view>
					</view>
					<view class="flex-sub">
						<view class="flex justify-center">
							<u--image :showLoading="true" src="/static/images/user/3.png" width="52rpx" height="52rpx">
							</u--image>
						</view>
						<view class="text-center margin-top-xs">
							待退
						</view>
					</view>
					<view class="flex-sub">
						<view class="flex justify-center">
							<u--image :showLoading="true" src="/static/images/user/4.png" width="52rpx" height="52rpx">
							</u--image>
						</view>
						<view class="text-center margin-top-xs">
							已退
						</view>
					</view>
					<view class="flex-sub">
						<view class="flex justify-center">
							<u--image :showLoading="true" src="/static/images/user/5.png" width="52rpx" height="52rpx">
							</u--image>
						</view>
						<view class="text-center margin-top-xs">
							评价
						</view>
					</view>
				</view>
			</view>

			<view class="margin-top-xs bg-white">
				<u-cell-group>
					<u-cell isLink size="large">
						<view class="flex align-center" slot="title">
							<u--image :showLoading="true" src="/static/images/user/6.png" width="52rpx" height="52rpx">
							</u--image>
							<text class="margin-left text-lg text-bold">我的钱包</text>
						</view>
					</u-cell>
					<u-cell isLink size="large">
						<view class="flex align-center" slot="title">
							<u--image :showLoading="true" src="/static/images/user/7.png" width="52rpx" height="52rpx">
							</u--image>
							<text class="margin-left text-lg text-bold">邀请好友奖</text>
						</view>
					</u-cell>
					<u-cell isLink size="large">
						<view class="flex align-center" slot="title">
							<u--image :showLoading="true" src="/static/images/user/8.png" width="52rpx" height="52rpx">
							</u--image>
							<text class="margin-left text-lg text-bold">我的小孩</text>
						</view>
					</u-cell>
					<u-cell isLink size="large">
						<view class="flex align-center" slot="title">
							<u--image :showLoading="true" src="/static/images/user/9.png" width="52rpx" height="52rpx">
							</u--image>
							<text class="margin-left text-lg text-bold">帮助中心</text>
						</view>
					</u-cell>
					<u-cell isLink size="large">
						<view class="flex align-center" slot="title">
							<u--image :showLoading="true" src="/static/images/user/10.png" width="52rpx" height="52rpx">
							</u--image>
							<text class="margin-left text-lg text-bold">系统设置</text>
						</view>
					</u-cell>
				</u-cell-group>
			</view>
		</mescroll-body>

		<u-no-network></u-no-network>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				statusH: 0, //状态栏高度
				xzqhName: '',
				XZQHPageList: [],
				show: false
			}
		},
		computed: {
			...mapState('user', ['userInfo']),
		},
		created() {
			//关闭弹窗
			uni.$on('close', () => {
				this.show = false
				this.cacheShow = false
			})

			uni.$on('outDetermine', () => {
				this.loginOut()
			})
		},
		onLoad() {
			this.statusH = uni.getSystemInfoSync().statusBarHeight
		},
		onShow() {
			this.$store.dispatch('user/$INIT');

			this.XZQHPageList = uni.getStorageSync('XZQH')

			this.xzqhName = this.getData(this.XZQHPageList)

			// this.isAutentication = uni.getStorageSync('is_auth') == 1 ? true : false;
		},
		methods: {
			//退出
			loginOut() {
				this.show = false
				this.$store.dispatch('user/$LOGOUT')
			},

			getData(dataList) {
				for (let i = 0; i < dataList.length; i++) {
					const oItem = dataList[i];
					if (oItem.xzqhdm === this.userInfo.ssxzqhdm) {
						return oItem.sxxzq;
					} else {
						if (oItem.xzqh && oItem.xzqh.length) {
							const result = this.getData(oItem.xzqh);
							if (result) {
								return result
							}
						}
					}
				}
			},

			//下拉刷新
			downCallback() {
				this.$store.dispatch('user/$INIT');
				setTimeout(() => {
					this.mescroll.endSuccess(); // 请求成功,隐藏加载状态
					this.mescroll.endErr(); // 请求失败,隐藏加载状态
				}, 800)
			},

		},
		beforeDestroy() {
			uni.$off(['close', 'outDetermine'])
		}
	}
</script>

<style lang="scss">
	.my-bg {
		background-size: cover;
	}
</style>
